import React, { useEffect } from 'react';
import { Form, Input, Modal } from 'antd';

interface IProps {
  open: boolean;
  onClose: () => void;
  onSave: (values: any) => void;
  functionData: any;
}

const FunctionEdit = (props: IProps) => {
  const { open, onClose, onSave, functionData } = props;

  const [form] = Form.useForm();
  const list = [
    { label: '品牌', value: functionData?.brandName, key: 'brandName' },
    { label: '功能分类', value: functionData?.functionCategory, key: 'functionCategory' },
    { label: '版本', value: functionData?.functionCategory, key: 'version' },
    { label: '二级功能名称', value: functionData?.itemName, key: 'secondaryFunctionName' },
    { label: '功能编号', value: functionData?.itemCode, key: 'functionCode' },
    { label: '基础命令', value: functionData?.command, key: 'command' },
  ];

  useEffect(() => {
    if (!open || !functionData) return;
    let { funcParam, tips } = functionData;
    form.setFieldsValue({
      funcParam,
      tips,
    });
  }, [open]);

  const onSubmit = async () => {
    let values = await form.validateFields();
    await onSave({
      sid: functionData.sid,
      ...values,
    });
    onCancel();
  };

  const onCancel = () => {
    form.resetFields();
    onClose();
  };

  return (
    <Modal open={open} title="功能编辑" onCancel={onCancel} onOk={onSubmit}>
      <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
        {list.map(item => {
          const { label, value, key } = item;
          return (
            <Form.Item label={label} style={{ marginBottom: '8px' }} key={key}>
              {value || '---'}
            </Form.Item>
          );
        })}
        <Form.Item label="功能参数" style={{ marginBottom: '8px' }} name="funcParam">
          <Input placeholder="请输入功能参数" />
        </Form.Item>
        <Form.Item label="提示文言（tips）" name="tips">
          <Input placeholder="请输入提示文言" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default FunctionEdit;
